import { Button, Table, Modal, Row, Col, message, Spin } from 'antd'
import { useState, useEffect } from 'react'
import { getBlackWhiteList, serviceAuth } from '@/api/sharing/serviceCatalog'

/* 服务测试弹窗 */
const ModalList = ({ isModalOpen, setIsModalOpen, id }) => {
  const [tableData, setTableData] = useState({})
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    if (isModalOpen) {
      setLoading(true)
      getBlackWhiteList(id).then((response) => {
        setTableData(response.data)
        setLoading(false)
      })
    }
  }, [isModalOpen])

  const handleOk = () => {
    setIsModalOpen(false)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  /* 移入白名单 */
  const moveToWhiteList = (row) => {
    const data = { id, type: 1, moveId: row.id }
    setLoading(true)
    serviceAuth(data)
      .then((response) => {
        if (response.code) {
          message.success('移入白名单成功')
          return getBlackWhiteList(id)
        }
      })
      .then((response) => {
        setTableData(response.data)
        setLoading(false)
      })
      .catch((error) => {
        console.error(error)
      })
  }
  /* 移入黑名单 */
  const moveToBlackList = (row) => {
    const data = { id, type: 0, moveId: row.id }
    setLoading(true)
    serviceAuth(data)
      .then((response) => {
        if (response.code === 200) {
          message.success('移入黑名单成功')
          return getBlackWhiteList(id)
        }
      })
      .then((response) => {
        setTableData(response.data)
        setLoading(false)
      })
      .catch((error) => {
        console.error(error)
      })
  }
  return (
    <Spin spinning={loading} tip="Loading...">
      <Modal styles={{ padding: 16 }} width={1200} title="黑白名单" footer={null} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Row gutter={24}>
          <Col span={12}>
            <Table
              bordered
              rowKey={(record) => record.id}
              columns={[
                {
                  title: '黑名单 （所有服务默认为黑名单服务，不可被访问）',
                  align: 'left',
                  children: [
                    {
                      title: '服务名称',
                      dataIndex: 'name',
                      align: 'center',
                    },
                    {
                      title: '版本号',
                      dataIndex: 'version',
                      align: 'center',
                    },
                    {
                      title: '操作',
                      align: 'center',
                      render: (_, record) => {
                        return (
                          <Button type="link" onClick={() => moveToWhiteList(record)}>
                            移入白名单
                          </Button>
                        )
                      },
                    },
                  ],
                },
              ]}
              dataSource={tableData?.blackList || []}
            />
          </Col>
          <Col span={12}>
            <Table
              bordered
              rowKey={(record) => record.id}
              columns={[
                {
                  title: '白名单 （服务移入白名单后可被访问）',
                  align: 'left',
                  children: [
                    {
                      title: '服务名称',
                      dataIndex: 'name',
                      align: 'center',
                    },
                    {
                      title: '版本号',
                      dataIndex: 'version',
                      align: 'center',
                    },
                    {
                      title: '操作',
                      align: 'center',
                      render: (_, record) => {
                        return (
                          <Button type="link" onClick={() => moveToBlackList(record)}>
                            移入黑名单
                          </Button>
                        )
                      },
                    },
                  ],
                },
              ]}
              dataSource={tableData.whiteList || []}
            />
          </Col>
        </Row>
      </Modal>
    </Spin>
  )
}

export default ModalList
